<template name="goodItem">
	<view class="goodItem" data-url="goodDetail" @tap="toGoodDetail" :data-id="goodInfo.id">
		<view class="imgBox">
			<image mode="widthFix" :src="goodInfo.img" lazy-load="true"></image>
		</view>
		<view class="infoBox">
			<text class="goodTitle">{{goodInfo.name}}</text>
			<view class="priceBox">
				<text class="priceNow">￥{{goodInfo.price}}</text>
				<!-- <text class="priceOld">￥{{goodInfo.price.toFixed(2)}}</text> -->
				<text class="sellCount">{{soldCount}}</text>

			</view>
			<!-- <text class="discount" v-if="goodInfo.discount">{{goodInfo.discount}}</text> -->
			<view class="shopBox">
				<text class="shopName">{{goodInfo.store.name}}</text>
				<text class="distance">{{dis}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import COMM from "@/common/common.js";
	export default {
		computed: {
			...mapState({
				locationCity: state => state.map.locationCity,
				roads: state => state.map.roads,
			})
		},
		name: 'goodItem', //组件名称
		// 传递参数
		props: {
			goodInfo: {
				type: Object,
				default: null,
			},
		},
		watch:{
			roads(newVal){
				this.getYuyue();
			}
		},
		// 组件参数
		data() {
			return {
				dis: '0米',
				soldCount: 0,
				showXieyi:false
			}
		},
		// 组件方法
		methods: {

			getYuyue() {
				let cnt = parseInt(this.goodInfo.sold);
				if (cnt < 10000) {
					this.soldCount = cnt + '人预约'
				} else {
					this.soldCount = parseFloat(cnt / 10000).toFixed(1) + '万人预约'
				}
				let lat1=this.goodInfo.store.lati;
				let lng1=this.goodInfo.store.longi;
				let lat2=this.roads.latitude;
				let lng2=this.roads.longitude;
				this.dis=COMM.getDis(lat1,lng1,lat2,lng2);
			},
			toGoodDetail(e) {
				let _id = e.currentTarget.dataset.id;
				let _goodInfo = this.goodInfo;
				_goodInfo.bannerList = [{
					location: 1,
					url: this.goodInfo.img
				}]
				uni.setStorageSync("toGood", _goodInfo)
				this.toPage({
					url: 'goodDetail',
					id: _id
				})
			},
		},
		created() {
			setTimeout(() => {
				this.getYuyue();
			}, 200)
		}
	}
</script>

<style lang="less" scoped>
	.goodItem {
		width: 100%;
		background-color: #fdfdff;
		box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(201, 202, 208, 0.35);
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		overflow: hidden;
		margin-bottom: 20rpx;

		.imgBox {
			border-radius: 14rpx;
			display: flex;
			justify-content: stretch;
			overflow: hidden;

			image {
				width: 100%;
			}
		}

		.infoBox {
			width: 100%;
			padding: 10rpx;
			display: flex;
			flex-direction: column;

			.goodTitle {
				width: 100%;
				font-size: 28rpx;
				color: #202932;
				margin-bottom: 10upx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}

		.tagBox {
			display: flex;
			flex-wrap: wrap;
		}

		.discount {
			font-size: 18rpx;
			color: #ff4738;
		}

		.priceBox {
			display: flex;
			align-items: baseline;
		}

		.priceNow {
			font-size: 33rpx;
			font-weight: bold;
			color: #ff3b2b;
		}

		.priceOld {
			font-size: 18rpx;
			text-decoration: line-through;
			color: #959ca6;
		}

		.sellCount {
			font-size: 18rpx;
			color: #959ca6;
			flex: 1;
			text-align: right;
		}

		.tagBox {
			display: flex;

			text {
				height: 26upx;
				background-color: #e5bc7a;
				border-radius: 13rpx;
				padding: 0 8rpx;
				font-size: 20rpx;
				line-height: 26upx;
				color: #FFFFFF;
				margin-right: 8rpx;
				margin-bottom: 2px;
			}
		}
		.xieyiShow{
			font-size: 24upx;
			color: #FFFFFF;
			background-color: #ffcd11;
			border-radius: 6upx;
			align-self: flex-start;
			padding: 2upx 10upx;
		}
		.shopBox {
			display: flex;

			.shopName {
				font-size: 18rpx;
				color: #959ca6;
				padding-right: 16rpx;
				flex-grow: 1;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.distance {
				font-size: 18rpx;
				color: #959ca6;
				flex-shrink: 0;
			}
		}
	}
</style>
